<%@page import="submarines.OnlineHumanPlayer"%>
<%@page import="java.util.List"%>
<%@page import="java.util.ListIterator"%>
<%@page import="submarines.Player"%>
<%@page import="submarines.PlayerManager"%>
<%@page import="submarines.Config"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Battleships</title>
        <link rel="shortcut icon" href="images/favicon.ico" />
        <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
        <script type="text/javascript" src="js/ajaxfileupload.js"></script>
        <link rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css" type="text/css" />
        <link rel="stylesheet" href="css/battleships.css" type="text/css" />
        <script type="text/javascript" src="js/welcome.js"></script>
    </head>
    <body>

<%
PlayerManager p = (PlayerManager)application.getAttribute("pManager");
if ((p != null) && (p.numPlayersLeft() == 1)) {
    p = null;
    getServletContext().setAttribute("pManager", p);
}
if ((p == null) || ((!p.isXml()) && ((p.getMaxPlayers() == -1) || ((!p.checkPlayers()))))) {
%>
        <div id="mainBody">
            <div id="welcome"></div>
            <%
            if ((p == null) || (p.getMaxPlayers() == -1)) {
                %>
            <div id ="numOfPlayers">
                <div class="content">
                    <form id="numPlayersForm" method="POST" action="gameManager">
                        <div id="players">
                            <div>Please pick the number of players in the game:</div>
                            <div>Human players: <input type="text" name="humans" id="human" value="1" /></div>
                            <div>Computer players: <input type="text" name="computers" id="computer" value="1" /></div>
                            <div id="slider-range"></div>
                            <div id="help">Use the right scroller to pick the amount of players, <br />and the left to pick how many will be <br />human and how many computer</div>
                        </div>
                    </form>
                </div>
            </div>
            <div id="uploadForm" style="display: none">
                <form id="upload" method="post" enctype="multipart/form-data" action="WebUi?actionName=uploadxml">
                    <fieldset>
                        <span>Please upload the XML file</span><br />
                        <input type="file" id="xmlfile" name="xmlFile" /><br />
                        <input type="button" value="Upload" name="upload" onclick="ajaxFileUpload()" />
                    </fieldset>
                </form>
            </div>
            <% } %>
            <div id="addPlayer">
                <div class="content">
                    <div id="playerTitle"></div><br />
                     <form id="addPlayerForm">
                        <label for="playerName">Player Name: </label>
                        <input type="text" name="playerName" id="playerName" /><br /><br />
                        <label for="playerType">Player type: </label>
                        <input type="text" disabled="yes" name="playerType" id="playerType" value="Human" /><br />
                        <div style="float: left">
                            <img src="images/userSelected.png" width="100px" id="humanIcon" />
                        </div>
                    </form>
                </div>
            </div>
            <div id="board" style="float: none">
                <div class="square"></div>
                <%
                    int i, j;
                    for (i = Config.BOARD_START; i < Config.BOARD_SIZE + Config.BOARD_START; i++) {%>
                <div class="square title"><%=(char) (i + 'A')%></div>   
                <%                }

                    for (i = Config.BOARD_START; i < Config.BOARD_SIZE + Config.BOARD_START; i++) {%>
                <div class="rowEnd"></div> 
                <div class="square title"><%=i + 1%></div>   
                <%
                    for (j = Config.BOARD_START; j < Config.BOARD_SIZE + Config.BOARD_START; j++) {%>
                <div class="square" data-col="<%=j%>" data-row="<%=i%>"></div>
                <%
                    }%>
                <%}
                %>
                <div class="rowEnd"></div> 
            </div>

                <button id="next" class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all next">
                <span class="ui-button-text">Next</span>
            </button>
                <button id="swap" class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all" style="display: none">
                <span class="ui-button-text">Use XML</span>
            </button>            
        </div>
                <div id="loading"><div class="content"><img src="images/ajax-loader.gif" /></div></div>
        <div id="errorMsg" title="Error"></div>
        <div id="pleaseWait" title="Please wait">
            <div id="waitBar"></div>
        </div>
        <div id="addShip" title="Please choose ship and orientation">
            <form id="addShipForm">
                <fieldset>
                    <label for="orientation">Orientation:</label>
                    <select name="orientation">
                        <option value="horizontal">Horizontal</option>
                        <option value="vertical">Vertical</option>
                    </select>
                    <label for="shipSize">Size</label>
                    <select name="shipSize" id="shipSize">
                    </select>
                </fieldset>
            </form>
        </div>
        <div id="removeShip" title="Are you sure you want to remove this ship?">Please confirm</div>

<%
} else {
    List<OnlineHumanPlayer> lst = p.checkUsersSessions();
    if (lst.isEmpty()) {
%>
        <div id="mainBody">
            <div id="gameInProgress">
                We are sorry, but a game is already in progress. <br />Please try again later.
            </div>
        </div>
<%
    } else {
        String hide = "block";
        String attr = request.getParameter("creator");
        if ((attr != null) && (attr.toString().equalsIgnoreCase("yes"))) {
            hide = "none";
        }
%>
        <div id="mainBody">
            <div id="welcome" style="display: <%=hide%>"></div>
            <div id="playersList" style="padding-bottom: 15px; display: none">
                <div>Please pick your player: </div>
<%
    ListIterator<OnlineHumanPlayer> itr = lst.listIterator();
        while (itr.hasNext()) {
            OnlineHumanPlayer pl = itr.next();
%>
<div class="playerPick" data-name="<%=pl.getName()%>"><%=pl.getName()%></div>
<%
        }
%>
            </div>
            <button id="next" class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all next">
                <span class="ui-button-text">Next</span>
            </button>
                <div id="loading"><div class="content"><img src="images/ajax-loader.gif" /></div></div>
        <div id="errorMsg" title="Error"></div>
        <div id="pleaseWait" title="Please wait">
            <div id="waitBar"></div>
        </div>
        </div>
<%
    }
}
%>
    </body>
</html>
